<template>
    <div class="container">
      <div class="form-body">
        <h2>注册账户</h2>
        <el-form ref="form" :model="registerForm" label-width="0px">
          <el-form-item  class="form-item">
            <el-input placeholder="请输入用户名" v-model="registerForm.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入密码" v-model="registerForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请确认密码" v-model="registerForm.rePassword" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入邮箱地址" v-model="registerForm.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="短信验证码" v-model="registerForm.smsCode"></el-input>
            <el-button
              type="primary"
              @click="sendCode"
              class="code-button"
              :disabled="isCountingDown">
              {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="form-confirm">注册</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toLogin" class="form-confirm">去登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Register",
      data() {
        return {
          registerForm:{
            username:'',
            password:'',
            rePassword:'',
            email:'',
            smsCode:''
          },
          countdown: 0,
          isCountingDown: false,
          countdownTimer: null
        }
      },
      methods: {
        validateEmail(email) {
          const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          return re.test(email);
        },
        sendCode() {
          // 验证邮箱格式
          if (!this.registerForm.email) {
            this.$message.error('请输入邮箱');
            return;
          }

          if (!this.validateEmail(this.registerForm.email)) {
            this.$message.error('请输入有效的邮箱地址');
            return;
          }
          if (this.isCountingDown) return;

          const _this = this;
          console.log(this.registerForm.email)
          this.axios.post("/user/sendCode", {
            email: this.registerForm.email
          })
            .then(function (response) {
              if (response.data.code === 0) {
                _this.$message.success('验证码发送成功');
                _this.startCountdown();
              } else {
                _this.$message.error(response.data.message || '验证码发送失败');
              }
            })
            .catch(function (error) {
              console.log(error);
              _this.$message.error('验证码发送失败');
            });
        },

        startCountdown() {
          this.countdown = 60;
          this.isCountingDown = true;
          this.countdownTimer = setInterval(() => {
            this.countdown--;
            if (this.countdown <= 0) {
              clearInterval(this.countdownTimer);
              this.isCountingDown = false;
            }
          }, 1000);
        },

        onSubmit(){
          var _this = this
          if(this.registerForm.password !== this.registerForm.rePassword){
            this.$message({
              message:'两次输入的密码不一致',
              type:'error'
            })
            return
          }
          if (!this.validateEmail(this.registerForm.email)) {
            this.$message.error('请输入有效的邮箱地址');
            return;
          }

          if (!this.registerForm.smsCode) {
            this.$message.error('请输入验证码');
            return;
          }

          this.axios.post("/user/register",{
            username:this.registerForm.username,
            password:this.registerForm.password,
            rePassword:this.registerForm.rePassword,
            email:this.registerForm.email,
            smsCode:this.registerForm.smsCode
          })
          .then(function (response) {
            console.log(response.data.message)
            if(response.data.code === 0){
              _this.$message.success(response.data.message);
            }
            else {
              _this.$message.error(response.data.message);
            }
            _this.$router.replace('/user/login')
          })
          .catch(function (error) {
            console.log(error)
          })
        },

        toLogin(){
          this.$router.replace('/user/login')
        },

        beforeDestroy() {
          // 清除定时器
          if (this.countdownTimer) {
            clearInterval(this.countdownTimer);
          }
        }
      }

    }
</script>

<style scoped>
  .container{
    height: 100%;
    width: 100%;
    /*background-image: url("../../static/bg.png");*/
    background-image: url("../../static/home.png");
    background-size: cover;
    position: fixed;
    left: 0px;
    top:0px;
  }
  .form-body{
    border-radius: 10px;
    margin: 100px auto auto;
    width: 25%;
    min-width: 200px;
    padding: 30px 30px 15px 30px;
    background-color: rgba(255,255,255,0.8);
    box-shadow: 5px 3px 10px rgba(0,0,0,0.9);
  }
  .form-confirm{
    width: 100%;
    background-color: #585858;
    border: 2px solid #484848;
    border-radius: 4px;
  }
</style>
